<!DOCTYPE html>
<html lang="en">
   <head>
    <meta charset="utf-8">
    <title>ROUTEMARKS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="One stop location for travellers to get information about their route. Make your routes more safe!">
    <meta name="author" content="Winster T. Jose">

    <!-- Le styles --> 
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/native.css" rel="stylesheet">
    
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
	
    <!-- Fav and touch icons -->
    <link rel="shortcut icon" href="img/favicon.ico">
    <link rel="canonical" href="http://www.routemarks.com" />
  
  </head>
  
  <body>
	
	<div id="fb-root"></div>
	<script>(function(d, s, id) {
	  var js, fjs = d.getElementsByTagName(s)[0];
	  if (d.getElementById(id)) return;
	  js = d.createElement(s); js.id = id;
	  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=485688004787851";
	  fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>
	
	<div class="navbar navbar-inverse navbar-fixed-top masthead">
		<div class="row-fluid">
			<div class="span10">
				<a href="/" style="text-decoration: none;"><img src="/assets/img/banner.png"></a>
			</div>
		</div> 
    </div>
    <div class="container-fluid app-container">
		<section>		
			<p>Please have a look at the video tutorial given in <i>about</i> page. In this section the features of each section of the screen is explained.
			<h4>Search</h4>
			<p>Helps to check the safety of the route based on the start and stop location given by the user. The route is considered as safe when you see lesser marks on the route.
			Default result will have the marks which have been created for the last year. But user can choose following options for more details from the blue drop down box right below <strong>View MarksM</strong> heading. <br>
			a) Today <br>
			b) Yesterday <br>
			c) Last week <br>
			d) Last month <br>
			e) Last year <br>
			f) All<br>		
			Also get a tabular report by <button type="button" class="btn btn-primary btn-small">Get Report <i class="icon-forward"></i></button> button.
			</p>
			<h4>Report screen</h4>
			<p>Report screen will display the number of marks which are created in the given bounds. Values of the bounds are decided by the start and stop locations given by the user
			in the home screen. Mark counts are displayed in a tabular format for current day, yesterday, last week, last month, last year and all.		
			</p>
			<h4>Community</h4>
			<p>Messages from the community are displayed to the right of the page. Default location will be the current country of the user. All the marks which are created in that country will be 
			displayed and new marks will be added to the list as and when they are created. User can choose a different location to see the marks which are created in that location.
			Users can authenticate each mark by clicking on any of the following three buttons. <br>
			a) Eye witness <abbr title="eye witness"><i class="icon-eye-open"></i></abbr> <br>
			b) I concur <abbr title="I concur"><i class="icon-bell"></i></abbr> <br> 
			c) Fake information <abbr title="fake information"><i class="icon-trash"></i></abbr> <br>
			</p>
			<h4>Map</h4>
			<p>Map displays the RouteMarks along with the route. A mark can be an accident location or a natural disaster affected area. Marks will be displayed as red spots on the map. 
			User can view details of a mark by clicking on it. The then opened info window will display the parameters that user has saved while creating the mark along with the image/video.
			In order to create a RouteMark, user has to click on the map which makes the map to zoom in to the desired level. Now user has to click on the exact location where he wants to create the mark.  
			Then a red mark will be displayed on the map. User can remove the red mark by a mere right click on it. If user clicks (left click) on the red mark, an information window will pop up.
			The info window has drop down boxes for category, transport mode, reason/nature and severity. The values in each of the select boxes are given below.<br>
			<table class="table table-hover">
				<thead>
					<tr>
						<th style="width:20%">Category</th>
						<th style="width:20%">Transport mode (Accident)</th>
						<th style="width:20%">Reason (Accident)</th>
						<th style="width:20%">Nature (Natural disaster)</th>
						<th style="width:20%">Severity</th>
					</tr>
				</thead>
	            <tbody>
	                <tr class="success">
	                  <td>Accident</td>
	                  <td>BiCycle</td>
	                  <td>Over speed</td>
	                  <td>Avalanche and Landslides</td>
	                  <td>Critical</td>
	                </tr>
	                <tr class="success">
	                  <td>Natural disaster</td>
	                  <td>Car</td>
	                  <td>Reckless driving</td>
	                  <td>Earthquake</td>
	                  <td>Major</td>
	                </tr>	    
	                <tr class="success">
	                  <td></td>
	                  <td>Motor Cycle</td>
	                  <td>Sharp Curve</td>
	                  <td>Hurricane or Typhoon</td>
	                  <td>Minor</td>
	                </tr>	    
	                <tr class="success">
	                  <td></td>
	                  <td>Public Transport</td>
	                  <td>Traffic rule violation</td>
	                  <td>Tornado</td>
	                  <td></td>
	                </tr>	     
	                <tr class="success">
	                  <td></td>
	                  <td>SUV</td>
	                  <td> Wrong message board</td>
	                  <td>Tsunami</td>
	                  <td></td>
	                </tr>	     
	                <tr class="success">
	                  <td></td>
	                  <td>Truck</td>
	                  <td>Ice road</td>
	                  <td>Volcanic Eruptions</td>
	                  <td></td>
	                </tr>	     
	                <tr class="success">
	                  <td></td>
	                  <td>Train</td>
	                  <td>Bad road</td>
	                  <td>Other</td>
	                  <td></td>
	                </tr>     
	                <tr class="success">
	                  <td></td>
	                  <td></td>
	                  <td>Other</td>
	                  <td></td>
	                  <td></td>
	                </tr>	                
	            </tbody>
	          </table>
			Based on the cateogry, transport mode, nature/reason and severity user can choose any values. User can also add some meaningful comment in the description field. 
			Continue operation by selecting next button <button type="button" class="btn btn-small btn-info"> <i class="icon-forward"></i> Next</button>. User can share any video(youtube/vimeo) or image url or even upload an image to the application. 
			Click <button type="button" class="btn btn-small btn-info"> <i class="icon-forward"></i> Next</button>. Just to ensure that the user is not a robot, fill in the basic mathematical formula and complete the process by clicking submit button which 
			will create a new ROUTEMARK. When the mark is created user will get notified via a message.  		
			</p>
			<h4>Login / View Account</h4>
			<p>By clicking on the ID Card link, a login dialog will pop up which has various open authentication service providers listed. User can choose any of these services and login to RouteMarks. When the user logs in, the page will display a green card which contains all of the user
			activities, points, etc. 
			</p>
			<h4>Help screen</h4>
			<p>Describes the features of the application as well as its behaviour.</p>
			<h4>Disclaimer screen</h4>
			<p>Warranties, limitations and provisions of the application.</p>
			<h4>Policies screen</h4>
			<p>Privacy policies of the application.</p>
			<h4>Feedback screen</h4>
			<p>User can provide feedback by completing the feedback form.</p>
			<h4>About screen</h4>
			<p>About screen has a video tutorial on how to use this application.</p>
			
		</section>		
	</div> <!-- /container -->
	<div class="footer">
		<div class="footercontent">
			<div class="row-fluid">
		   		<div class="span5" >
		   			<div class="fb-like" data-href="http://www.routemarks.com/" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false"></div>
		   		
		   			<g:plusone></g:plusone>
			   		<script type="text/javascript">
				      window.___gcfg = {
				        lang: 'en-US'
				      };
				
				      (function() {
				        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
				        po.src = 'https://apis.google.com/js/plusone.js';
				        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
				      })();
				    </script>
					<script type="text/javascript">
					
					  var _gaq = _gaq || [];
					  _gaq.push(['_setAccount', 'UA-39564014-1']);
					  _gaq.push(['_trackPageview']);
					
					  (function() {
					    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
					    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
					    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
					  })();
					
					</script>
		   		</div>
		   		<div class="span3" style="text-align:center">
		   	 		<a target="_blank" href="http://winstertjose.com">winstertjose.com</a>&copy; 2012 
		   		</div>
				<div class="span4 pull-right footerlinks">
					<a href="about.html">about</a>
					<a target="_blank" href="https://docs.google.com/spreadsheet/viewform?formkey=dFdWai1JMmFKX1RCWTROMm1CZXltMWc6MA">feedback</a><!-- <a href="#feedback" data-toggle="modal">feedback</a> -->
					<a href="policies.html">policies</a> 
					<a href="disclaimer.html">disclaimer</a>
					<a href="help.html">help</a>			  
				</div>		  
		 	</div>
		</div>	   	 
	</div>	
  </body>
</html>